<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataRyfh } from "@/api/search";
import { addOrUpdateRyfh } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();

const toolbarConfig = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};

const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");

// 加载html
const initHtml = () => {
  searchDataRyfh({ m: "相关保障-交通运输保障要点" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "车辆保障")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "油料保障")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "维修保障")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "保障任务：负责运输保障及担负重要物资的运送任务，向疏散地域运送人员、物资，具体数量按本计划第二节“任务需求”中明确的交通运力需求清单计算，战时按照人民防空指挥部统一部署、集中调配。<br/>保障部署：各县（区）人民防空指挥部按照市人民防空指挥部统一部署，开展运输保障工作，各县（区）交通运输保障组具体负责组织实施，原则上本级预先开展行政区划内运输保障任务，让胡路区支援萨尔图区和龙凤区，四县支援龙凤区，必要时按照任务完成时限组织开展跨区支援任务。公安交警部门负责在机动行进中的交通管制，保障人防专业队机动中的交通顺畅。"
);

const valueHtml1 = ref(
  "保障任务：主要担负人员防护行动过程中的临时用油和应急用油保障。<br/>保障部署：重点以中石油、中石化加油站保障为主，私营企业加油站为辅，各县（区）交通运输组结合疏散人员集合点就近部署设置加油站点。战时急用油保障由中国石油东北销售某某分公司保障。<br/>保障方法：油料以车辆提供单位申请政府专项补贴的方式自行组织保障为主，途中临时定点保障为辅。疏散途中的油料保障点由交通运输保障指挥组按疏散计划提前指定设置。<br/>保障标准：按单车单次执行疏散任务，行驶300公里计算油料消耗量。"
);

const valueHtml2 = ref(
  "保障任务：主要担负人员防护行动过程中的车辆的应急维修保障。<br/>保障部署：各交通运输专业队所在单位负责运输车辆的维修保养工作，县（区 ）交通运输指挥组负责动员本行政区划内所属车辆维修企业，结合人员防护行动计划合理设置车辆维修保障点，完成应急维修保障任务。<br/>保障方法：维修及维修配件以车辆提供单位自行伴随保障为主，途中临时定点保障为辅。疏散途中的维修保障点由交通运输保障指挥组按疏散计划提前指定设置。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateRyfh({
      m: "相关保障-交通运输保障要点",
      data: [
        {
          k: "车辆保障",
          v: valueHtml.value,
        },
        {
          k: "油料保障",
          v: valueHtml1.value,
        },
        {
          k: "维修保障",
          v: valueHtml2.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
});
// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};
const tableData = ref([
  {
    c1: 1,
    c2: city,
    cc: "长沙",
    c3: "x",
  },
  {
    c1: 2,
    c2: city,
    cc: "武汉",
    c3: "x",
  },
  {
    c1: 3,
    c2: city,
    cc: "武汉",
    c3: "x",
  },
]);
</script>
<template>
  <div class="">
    <FirstTitle name="车辆保障" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <div class="top-15">
      保障方法：执行疏散任务时，由担负运输保障任务的交通运输专业队与街道和社区直接建立联系，对口保障。
    </div>

    <FirstTitle name="油料保障" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="维修保障" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>